<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            float: left;
            width: 800px;
            border: 1px solid #000;
            padding: 20px;
            font-size: 20px;
            background-color: #fed;
        }
        #addBox{
            width: 300px;
            padding: 20px;
            border: 1px solid #000;
            background-color: #def;
            position: fixed;
            right:0px;
        }
    </style>
</head>
<body>
    <h1>AJAX</h1>
    <hr>
    
    <div id="box"></div>

    <div id="addBox">
        <form name="addForm" onsubmit="return addData()">
            姓名: <input type="text" name="name"><br>
            性别: 
                <input type="radio" name="sex" value="0">女
                <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex" value="2">人妖<br>
            年龄:<input type="text" name="age"><br>

            <button>提交数据</button>
        </form>
    </div>


    <script>
        // 无刷新添加数据
        function addData() {
            // 各种获取
            var name = document.addForm.name.value;
            var sex = document.addForm.sex.value;
            var age = document.addForm.age.value;

            var xhr = new XMLHttpRequest();

             xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (xhr.responseText > 0) {
                        alert('添加成功!');
                        // loadHtml();
                        var tr = table.insertRow(table.rows.length);
                        tr.insertCell(0).innerHTML = xhr.responseText;
                        tr.insertCell(1).innerHTML = name;
                        tr.insertCell(2).innerHTML = sex;
                        tr.insertCell(3).innerHTML = age;
                        tr.insertCell(4).innerHTML = '';
                    } else {
                        alert('添加失败,请重试..');
                    }
                }
            }

            xhr.open('post', './php/5.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send('name='+name+'&sex='+sex+'&age='+age);

            return false;
        }


        loadHtml();
        function loadHtml() {
            var xhr = new XMLHttpRequest();
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 清空之前的内容
                    box.innerHTML = '';
                    // 获取JSON字串数据
                    var jsonStr = xhr.responseText;

                    // eval("var obj = " + jsonStr);
                    // var obj = eval('('+jsonStr+')');
                    var obj = JSON.parse(jsonStr);
                    // console.log(obj);

                    // 把数据 以表格的形式 输出
                    // 创建table 并设置属性
                    var table = document.createElement('table');
                    table.width = 800;
                    table.border = 1;
                    table.cellSpacing = 0;
                    table.cellPadding = 5;
                    table.id = 'table';

                    // table 添加到box中
                    box.appendChild(table);

                    // 添加表头行
                    var tr = table.insertRow(0);
                    // 添加表头 th
                    addTH(tr, ['ID', 'NAME', 'SEX', 'AGE', 'PROVINCE']);

                    // 添加数据
                    for (var i = 0; i < obj.length; i++) {
                        var tr = table.insertRow(i+1);
                        tr.insertCell(0).innerHTML = obj[i].id;
                        tr.insertCell(1).innerHTML = obj[i].name;
                        tr.insertCell(2).innerHTML = obj[i].sex;
                        tr.insertCell(3).innerHTML = obj[i].age;
                        tr.insertCell(4).innerHTML = obj[i].province;
                    }
                }
            }
            
            xhr.open('get', './php/4.php', true);
            xhr.send();
        }


        function addTH(tr, data){
            for (var i = 0; i < data.length; i++) {
                var th = document.createElement('th');
                th.innerHTML = data[i];
                tr.appendChild(th);
            }
        }
       

    
    </script>
</body>
</html>